@import shared.VarTool
@()
@mainWithSearch("Statistics") {

	<style>

		.myImgP{
			max-height: 500px;
			overflow-y: auto;
		}

		.btn-group{
			margin-left: 5px;
		}

		.detailTable > thead > tr > th, .detailTable > tbody > tr > th, .detailTable > tfoot > tr > th, .detailTable > thead > tr > td, .detailTable > tbody > tr > td, .detailTable > tfoot > tr > td {
			vertical-align: middle;
			text-align: center;
		}

	</style>

	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title"><span class="fa fa-flag"></span> Statistics</h3>
		</div>
		<div class="panel-body">

			<h4 class="myTitle">The updated information of exoRBase2.0:</h4>

			<table class="display table table-bordered detailTable" id="updateTable" data-pagination="true" data-search="true"
			data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
			style="word-wrap: break-word">
				<tbody></tbody>
			</table>

			<hr>
			<h4 class="myTitle"><a id="sampleNumber"></a>The sample number of each cohort:</h4>

			<div class="row">
				<div class="col-sm-12">

					<div class="myCharts" align="center">

						<div class="myImgP" style="">
							<img src="@routes.Assets.at("images/sample.png")" id="bloodImage" style="width: 100%">
						</div>

						<table class="display table table-bordered detailTable" id="sampleTable" data-pagination="true" data-search="true"
						data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
						style="word-wrap: break-word;margin-top: 5px">
							<tbody></tbody>
						</table>

					</div>

				</div>
			</div>

			<h4 class="myTitle">exoRBase2.0 RNA-seq data contributors:</h4>

			<table class="display table table-bordered table-striped" id="numberTable" data-pagination="true" data-search="true"
			data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
			style="word-wrap: break-word">
				<tbody></tbody>
			</table>

		</div>
	</div>

	<script>

			$(function () {

				Statistics.init

			})

	</script>


}